<template>
  <div class="row">
    <!-- select -->
    <template v-if="type === 'select'">
      <div class="title">{{ title }}</div>
      <div class="content" @click="select">
        <span
          v-if="content"
          :class="disabled ? 'disabled ellipsis' : 'black ellipsis'"
          >{{ content }}</span
        >
        <span v-else class="tip">{{ disabled ? disabledTip : tip }}</span>
        <span v-if="!disabled" class="option">选择</span>
      </div>
    </template>
    <!-- input -->
    <template v-else-if="type === 'input'">
      <div class="title">{{ title }}</div>
      <div class="content">
        <input
          :placeholder="disabled ? disabledTip : tip"
          type="text"
          :value="content"
          :disabled="disabled"
          @input="$emit('input', $event.target.value)"
        />
        <!-- <span v-if="unit" class="unit">{{ unit }}</span> -->
      </div>
    </template>
    <template v-else-if="type === 'number'">
      <div class="title">{{ title }}</div>
      <div class="content">
        <input
          :placeholder="tip"
          :value="content"
          :disabled="disabled"
          @input="$emit('input', $event.target.value)"
        />
        <span v-if="unit" class="unit">{{ unit }}</span>
      </div>
    </template>
    <!-- textarea -->
    <template v-else-if="type === 'textarea'">
      <div class="title">{{ title }}</div>
      <div class="">
        <textarea
          v-model="value"
          :placeholder="tip"
          name=""
          cols="30"
          :rows="textRows"
          @input="$emit('input', $event.target.value)"
        ></textarea>
      </div>
    </template>
    <!-- radio -->
    <template v-else-if="type === 'radio'">
      <div class="title">{{ title }}</div>
      <div class="content radio">
        <div class="tip">{{ tip }}</div>
        <div class="options">
          <!-- <label v-for="(item, index) in options" :key="index">
            <input type="radio" :name="index" :value="index" :checked="content === index" />
            {{ item }}
          </label> -->
          <van-radio-group
            v-model="radioValue"
            style="margin-top: 10px"
            @change="changeRadio"
          >
            <div style="display: flex; justify-content: space-between">
              <van-radio name="1">选择已建档主体</van-radio>
              <van-radio name="2" style="margin-left: 14px">临时建档</van-radio>
            </div>
          </van-radio-group>
        </div>
      </div>
    </template>
    <!-- upload -->
    <template v-else-if="type === 'upload'">
      <div class="title">{{ title }}</div>
      <div class="content upload">
        <p class="tip">{{ tip }}</p>
        <div class="box">
          <file-upload
            v-model="fileList"
            :maxLen="maxLen"
            @change="uploadFile"
          />
        </div>
      </div>
    </template>
    <!-- default -->
    <template v-else>
      <div class="title">{{ title }}</div>
      <div class="content">{{ content }}</div>
    </template>
  </div>
</template>

<script>
import fileUpload from '@/components/file-upload'
export default {
  name: 'inputCardItem',
  components: { fileUpload },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    disabledTip: {
      type: String,
      default: '无需填写'
    },
    type: {
      type: String,
      default: ''
    },
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 内容
    content: {
      type: [String, Number],
      default: ''
    },
    // 提示
    tip: {
      type: String,
      default: ''
    },
    // 单位
    unit: {
      type: String,
      default: ''
    },
    // textarea行数
    textRows: {
      type: Number,
      default: 3
    },
    // radio options
    options: {
      type: Array,
      default: () => []
    },
    // 上传个数
    // 文件上传最大个数
    maxLen: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      value: '',
      fileList: [],
      radioValue: '1'
    }
  },
  created() {},
  methods: {
    _click() {
      this.$emit('click')
    },
    select() {
      if (this.disabled) return false
      this.$emit('select')
    },
    uploadFile(e) {
      if (this.disabled) return false
      this.$emit('upload', e)
      console.log('上传成功')
    },
    changeRadio(e) {
      if (this.disabled) return false
      this.$emit('radio', e)
    }
    // // 失去焦点
    // onBlur(e) {
    //   this.$emit('blur', e.target.value)
    //   console.log('blur')
    // },
    // // 输入
    // onInput(e) {
    //   this.$emit('input', e.target.value)
    // }
  }
}
</script>

<style lang="scss" scoped>
// input禁用-样式
input:disabled {
  background-color: #fff;
  // color: #656c74;

  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0px;
  color: #171819 !important;
  // 应对IOS 字体发灰
  opacity: 1;
  -webkit-text-fill-color: #171819 ;
}
.black {
  // color: #171819;
}
.disabled {
  // color: #656c74;
}
.row {
  .title {
    font-family: PingFang SC Regular;
    font-size: 14px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0px;
    color: #171819;
  }

  .content {
    font-family: PingFang SC Regular;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0px;
    color: #171819;
    position: relative;
    height: 38px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;

    // 单行省略
    .ellipsis {
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      white-space: nowrap;
    }

    input {
      width: 270px;
    }

    // 下边线
    &::after {
      content: '';
      width: 100%;
      height: 0.5px;
      background: #e2e7ec;
      position: absolute;
      left: 0;
      bottom: 0;
    }

    .tip {
      font-family: PingFang SC Regular;
      font-size: 14px;
      font-weight: normal;
      line-height: 19px;
      letter-spacing: 0px;
      color: #b2b8bd;
    }

    .option {
      font-family: PingFang SC Medium;
      font-size: 14px;
      font-weight: normal;
      line-height: 19px;
      letter-spacing: 0px;
      /* 蓝 */
      color: #2163e0;
      flex-shrink: 0; // 禁止自动压缩
    }

    .unit {
      font-family: PingFang SC Medium;
      font-size: 14px;
      font-weight: normal;
      line-height: 19px;
      text-align: right;
      letter-spacing: 0px;
      /* 粤商通/常规黑色 */
      color: #171819;
    }
  }

  &:last-child {
    .content {
      margin-bottom: 0;

      &::after {
        display: none !important;
        height: 40px;
      }
    }
  }
}
// 上传
.upload {
  height: auto !important;
  display: block !important;
  .title {
    font-family: PingFang SC Regular;
    font-size: 14px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0px;
    /* 一级标题颜色 */
    color: #171819;
  }

  .tip {
    font-family: PingFang SC Regular;
    font-size: 14px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0px;
    margin-top: 6px;
    /* 大灰 */
    color: #656c74 !important;
  }

  .box {
    padding: 16px 0;
  }
}

// 单选框
.radio {
  height: auto !important;
  display: block !important;

  .tip {
    font-family: PingFang SC Regular;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
    letter-spacing: 0px;
    color: #b2b8bd;
    margin-top: 6px;
  }
  .options {
    display: flex;
    font-size: 14px;
    line-height: 28px;
    height: 38px;
  }

  label {
    flex: 1;
    display: flex;
    align-items: center;
  }
  input[type='radio'] {
    border: 0.5px solid #e2e7ec;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 8px;
  }
  input[type='radio']:checked {
    border: 6px solid #2163e0;
  }
}
</style>
